<template>
  <div class="new-list">
    <div class="top-head">
      <h2>新作榜</h2>
      <span>前7日综合指标最高的三个月内上线漫画作品排行</span>
    </div>
    <div class="comic-grid">
      <div class="comic-card" v-for="(item, index) in items" :key="index">
        <div class="left-section">
          <img :src="item.url" alt="漫画封面">
          <div class="rank-badge">{{ formatRank(index + 1) }}</div>
        </div>
        <div class="right-section">
          <p class="title">{{ item.title }}</p>
          <span class="author">{{ item.from }}</span>
          <span class="category">{{ item.sort }}</span>
          <span class="update">更新至{{ item.now }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import rank_img1 from '@/assets/imgs/comic/rank_list/rank_img1.png'
// 格式化排名数字（小于10的补0）
const formatRank = (num) => {
  return num <= 3 ? num : num < 10 ? `0${num}` : num
}
const items = ref([
  {
    url: rank_img1,
    title: '修真从种出妖族女帝开始',
    from: '爱豆喵工作室',
    sort: '玄幻',
    now: '6'
  },
  {
    url: rank_img1,
    title: '起开，这个魔法少女我来当',
    from: '原子猫',
    sort: '都市',
    now: '3'
  },
  {
    url: rank_img1,
    title: '说好做科普，粉丝却全是魔女？',
    from: '三汉神工作室',
    sort: '奇幻',
    now: '15'
  },
  {
    url: rank_img1,
    title: '请用约会拯救世界',
    from: '墨成文化',
    sort: '都市',
    now: '17'
  },
  {
    url: rank_img1,
    title: '天敌抗战记',
    from: '讲谈社',
    sort: '奇幻',
    now: '26'
  },
  {
    url: rank_img1,
    title: '我的小恶女',
    from: 'Winterleaf',
    sort: '西幻',
    now: '21'
  },
  {
    url: rank_img1,
    title: '修真从种出妖族女帝开始',
    from: '爱豆喵工作室',
    sort: '玄幻',
    now: '6'
  },
  {
    url: rank_img1,
    title: '起开，这个魔法少女我来当',
    from: '原子猫',
    sort: '都市',
    now: '3'
  },
  {
    url: rank_img1,
    title: '说好做科普，粉丝却全是魔女？',
    from: '三汉神工作室',
    sort: '奇幻',
    now: '15'
  },
  {
    url: rank_img1,
    title: '请用约会拯救世界',
    from: '墨成文化',
    sort: '都市',
    now: '17'
  },
  {
    url: rank_img1,
    title: '天敌抗战记',
    from: '讲谈社',
    sort: '奇幻',
    now: '26'
  },
  {
    url: rank_img1,
    title: '我的小恶女',
    from: 'Winterleaf',
    sort: '西幻',
    now: '21'
  }
])
</script>

<style scoped lang="scss">
.new-list {
  width: 100%;
  margin: 0 auto;
  padding: 20px;

  .top-head {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;

    h2 {
      font-size: 24px;
      color: #666;
      font-weight: normal;
      margin: 0;
      white-space: nowrap;
    }

    span {
      color: #666;
      font-size: 14px;
      margin: 0;
    }
  }

  .comic-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }

  .comic-card {
    display: flex;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    overflow: visible;

    .left-section {
      flex: 0 0 102px;
      position: relative;

      /* 为排名徽章提供定位上下文 */
      .rank-badge {
        position: absolute;
        top: 8px;
        left: -18px;
        width: 24px;
        height: 24px;
        color: rgb(228, 170, 23);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 40px;
        font-weight: bold;
        z-index: 20;
      }

      img {
        width: 102px;
        height: 136px;
        object-fit: cover;
        display: block;
      }
    }

    .right-section {
      flex: 1;
      padding: 12px;
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      /* 所有子元素左对齐 */

      .title {
        font-size: 16px;
        font-weight: bold;
        margin: 0 0 8px 0;
        color: #333;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
        line-height: 1.4;
      }

      .author {
        font-size: 13px;
        color: #666;
        margin-bottom: 6px;
      }

      .category {
        font-size: 12px;
        color: #888;
        padding: 2px 8px;
        border-radius: 4px;
        display: inline-block;
        margin-bottom: 6px;
      }

      .update {
        font-size: 12px;
        color: #888;
        font-weight: 500;
      }
    }
  }
}
</style>
